﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="./common/head :: head"></head>
<body style="background-color: #ecf0f1;">
<script type="text/javascript" th:inline="javascript">
    var contextPath = [[${session.ctx}]];
    var username = [[${session.user.name}]];
    var userId = [[${session.user.id}]];
    $(function () {
        var title = common.getUrlParam("title");
        var url = common.getUrlParam("url");
        var description = common.getUrlParam("description");
        common.render("#cover,#editCover", userId);
        $("#collectForm").loadJson({
            name:title,
            ancestors: url,
            description: description
        });
        $("#collectForm").bootstrapValidator({
            live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
            excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
            submitButtons: '#collectSaveBtn',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
            message: '验证失败',//好像从来没出现过
            feedbackIcons: {//根据验证结果显示的各种图标
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '名称必须输入'
                        },
                    }
                },
                cover: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '请选择分类'
                        },
                    }
                },
                ancestors: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '地址必须输入'
                        },
                        regexp: {
                            regexp: /^(http|https):\/\/.*/,
                            message: '收藏地址不正确'
                        }
                    }
                },
            }
        }).on('success.form.bv', function (e) {//点击提交之后
            e.preventDefault();
            var data = $(e.target).serializeJSON();
            data.parentName = username;
            data.level = false;
            http.add("category", data, function (data) {
                if (data.success) {
                    toastr.success('保存成功');
                    $('#editModal').modal('hide');
                    location.href = contextPath + "/main";
                } else {
                    toastr.warning('保存失败');
                    $('#editModal').modal('hide');
                }
            });
        });

        common.coverPoper();
    });

    function coverSave() {
        var data = $("#coverSaveForm").serializeJSON();
        data.userId = userId;
        http.add("categoryCover",data,function (resp) {
            if (resp.success) {
                toastr.success('保存成功,已设置该收藏为分类：'+resp.data.coverName);
                $("#coverAddBtn").popover("hide");
                $("#editCover").append("<option value='"+resp.data.id+"'>"+resp.data.coverName+"</option>")
                    .val(+resp.data.id);
            } else {
                toastr.warning('保存失败');
                $("#coverAddBtn").popover("hide");
            }
        },function (resp) {
            if(resp.responseText.indexOf("Duplicate entry")){
                toastr.error('保存失败，分类名称重复');
            }else{
                toastr.error('保存失败');
            }
            $("#coverAddBtn").popover("hide");
        });
    }

</script>
<div class="container">
    <div class="row">
        <div style="width:450px;margin: 25px auto;">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">添加收藏</h3>
                </div>
                <div class="panel-body">
                    <form id="collectForm">
                        <input type="hidden" name="id">
                        <div class="form-group">
                            <label for="editName">名称</label>
                            <input type="text" class="form-control" id="editName" name="name" placeholder="链接名称">
                        </div>
                        <div class="form-group">
                            <div class="row" style="padding: 0 15px">
                                <label for="editCover">分类</label>
                            </div>
                            <div class="row" style="padding: 0 15px">
                                <div style="float:left;width: 88%;">
                                    <select class="form-control" id="editCover" name="cover"></select>
                                </div>
                                <div style="float:left;width: 10%;">
                                    <button id="coverAddBtn" type="button" class="btn btn-success"><span
                                            class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editAncestors">地址</label>
                            <textarea type="text" class="form-control" id="editAncestors" name="ancestors" rows="3"
                                      placeholder="http(s)://"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="editDescription">描述</label>
                            <textarea type="text" class="form-control" id="editDescription" name="description"
                                      placeholder="描述"></textarea>
                        </div>
                        <div class="form-group">
                            <button id="collectSaveBtn" type="submit" class="btn btn-success btn-block">确认</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--分类-->
    <div id="coverAddTip" class="hide">
        <form id="coverSaveForm" class="form-horizontal" style="width:180px;">
            <div class="form-group">
                <div class="col-xs-12 col-md-12">
                    <input type="text" class="form-control popover-field"  name="coverName" placeholder="分类名称">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-12 col-sm-12">
                    <button id="coverSaveBtn" onclick="coverSave()" type="button" class="btn btn-success btn-block coverSaveBtn popover-field">添加</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>